<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            background-color: #1b1a1a;
        }
        .stage{
            clear: both;
            content: '';
            display:flex;
            justify-content: center;
        }
        .blowup {
            width: 300px;
            height: 300px;
            position: relative;
            margin: 20px;
            cursor: crosshair;

        }

        .blowup img {
            width: 100%;
        }

        .blowup .zoom {
            width: 150px;
            height: 150px;
            /* background: url('./img/a1.png'); */
            position: absolute;
            bottom: 0;
            right: 0;
            border: 5px solid white;
            /* background-size: 1000px 1000px; */
            /* opacity: 0.3; */
            border-radius: 50%;
            background-repeat: no-repeat;
            box-sizing: border-box;
        }
        .zuo{
            float: left;
        }
        .you{
            float: right;
        }
    </style>

    
</head>

<body>
    <div class="stage">
        <div class="blowup left zuo">
            <img src="./img/a1.png" alt="">
        </div>


        <div class="blowup right you">
            <img src="./img/a2.png" alt="">
        </div>
        
    </div>

    <style>
          .right {
              width: 500px;
              height: 500px;
          }  
    </style>
    <script src="https://cdn.staticfile.org/jquery/1.12.4/jquery.min.js"></script>

    <script>

        function blowup(jQueryObj, zoomLevel) {
            var zoom = zoomLevel
            jQueryObj.append('<div class="zoom"></div>')

            // console.log($('.left').height())
            jQueryObj.find('.zoom').css({
                backgroundImage: 'url(' + jQueryObj.find('img').attr('src') + ')',
                backgroundSize: jQueryObj.width() * zoomLevel + 'px ' + jQueryObj.height() * zoomLevel + 'px'
            })

            jQueryObj.on('mousemove', function (event) {
                // console.log(event.pageX, event.pageY)
                // $('.left').offset()

                // 鼠标的指针位置
                var x = event.pageX - $(this).offset().left
                var y = event.pageY - $(this).offset().top

                console.log(x, y)
                $(this).find('.zoom').show()

                if (x > jQueryObj.width() || x < 0 || y >= jQueryObj.height() || y < 0) {
                    $(this).find('.zoom').hide()
                    return
                }
                var zoomSize = {
                    w: $(this).find('.zoom').outerWidth(),
                    h: $(this).find('.zoom').outerHeight()
                }

                $(this).find('.zoom').css({
                    left: x - zoomSize.w / 2 + 'px',
                    top: y - zoomSize.h / 2 + 'px',
                    backgroundPositionX: -(x * zoomLevel - zoomSize.w / 2) + 'px',
                    backgroundPositionY: -(y * zoomLevel - zoomSize.h / 2) + 'px',
                })
            })
        }

        blowup($('.left'), 2)

        blowup($('.right'), 2)

    </script>
</body>

</html>